﻿
<script src="~/Scripts/jquery-easyui-extensions/tabs/jeasyui.extensions.tabs.setTitle.js"></script>

<div id="tabs1" class="easyui-tabs" data-options="fit:true,border:false">
    <div data-options="title:'标签页1',closable:false,iconCls:'icon-add'" style="padding:15px;">
        标签页1
        <br />
        <a id="btnSetTabTitle_1" class="easyui-linkbutton" data-options="iconCls:'icon-add'">重设当前标签页的标题</a>
    </div>
    <div data-options="title:'标签页2',closable:true,iconCls:'icon-edit',selected:true" style="padding:15px;">
        标签页2
        <br />
        <a id="btnSetTabTitle_2" class="easyui-linkbutton" data-options="iconCls:'icon-add'">重设当前标签页的标题</a>
    </div>
    <div data-options="title:'标签页3',closable:false,iconCls:'icon-remove'" style="padding:15px;">
        标签页3
        <br />
        <a id="btnSetTabTitle_3" class="easyui-linkbutton" data-options="iconCls:'icon-add'">重设当前标签页的标题</a>
    </div>
</div>

<script>
    $(function () {

        $("a[id^='btnSetTabTitle']").click(function () {
            var id = $(this).attr("id"),
                order = id.split("_")[1],
                title = "标签页" + order;
            if (!$("#tabs1").tabs("exists", title)) { return; }
            $("#tabs1").tabs("setTitle", { which: title, title: "<span style='color:red;'>标签页</span>" + order + order });
        });
    });

</script>
